<template>
  <div class="view-echarts-category">
    <a-row>
      <a-col :span="24" class="view-echarts-category-col">
        <a-card title="柱形图" :bordered="false">
          <a-alert message="以下所有的 demo皆引用echarts 官方示例" type="success" />
          <br />
          文档地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a target="_blank" href="">https://www.isqqw.com/</a>
        </a-card>
      </a-col>
      <a-col :span="8" class="view-echarts-category-col" v-for="item in barList" :key="item.id">
        <a-card :title="item.title" :bordered="false">
          <div :id="item.id" class="view-echarts-category-basis"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup name="Bar">
import { colorOptions, datasetOptions, doubleXBarOptions, threeDBarOption, crosswiseBarOption, MixedBarOption } from './index'

import * as echarts from 'echarts/core'
import { BarChart, LineChart, PictorialBarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, LegendComponent, TransformComponent, ToolboxComponent } from 'echarts/components'

import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([TitleComponent, LegendComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, ToolboxComponent, BarChart, LineChart, LabelLayout, UniversalTransition, CanvasRenderer, PictorialBarChart])

const barList = ref([
  { title: '背景的柱形图', id: 'colorBar' },
  { title: '数据集柱形图', id: 'datasetBar' },
  { title: '堆叠柱状图', id: 'doubleXBar' },
  { title: '3D圆柱', id: 'threeDBar' },
  { title: '横向柱形图', id: 'crosswiseBar' },
  { title: '折柱混合', id: 'MixedBar' }
])

/**
 * setup
 * @param {*}
 * @returns
 */

let handleResize: (() => void) | null = null

//  背景的柱形图
let colorBarChart: echarts.ECharts | null = null

//  数据集柱形图
let datasetBarChart: echarts.ECharts | null = null

//  堆叠柱状图
let doubleXBarChart: echarts.ECharts | null = null

// 3D圆柱
let threeDBarChart: echarts.ECharts | null = null

// 横向柱形图
let crosswiseBarChart: echarts.ECharts | null = null

// 折柱混合
let MixedBarChart: echarts.ECharts | null = null

onMounted(() => {
  colorBarChart = echarts.init(document.getElementById('colorBar')!)

  doubleXBarChart = echarts.init(document.getElementById('doubleXBar')!)

  threeDBarChart = echarts.init(document.getElementById('threeDBar')!)

  crosswiseBarChart = echarts.init(document.getElementById('crosswiseBar')!)

  MixedBarChart = echarts.init(document.getElementById('MixedBar')!)

  datasetBarChart = echarts.init(document.getElementById('datasetBar')!)

  handleResize = () => {
    colorBarChart?.resize()
    datasetBarChart?.resize()
    doubleXBarChart?.resize()
    threeDBarChart?.resize()
    crosswiseBarChart?.resize()
    MixedBarChart?.resize()
  }

  // 绘制基础柱形图
  colorBarChart?.setOption(colorOptions)
  // 绘制基础面积图
  datasetBarChart?.setOption(datasetOptions)
  // 绘制堆叠柱状图
  doubleXBarChart?.setOption(doubleXBarOptions)
  // 绘制3D圆柱
  threeDBarChart?.setOption(threeDBarOption)
  // 横向柱形图
  crosswiseBarChart?.setOption(crosswiseBarOption)
  // 折柱混合
  MixedBarChart?.setOption(MixedBarOption)

  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize!)
  colorBarChart?.dispose()
  datasetBarChart?.dispose()
  doubleXBarChart?.dispose()
  threeDBarChart?.dispose()
  crosswiseBarChart?.dispose()
  MixedBarChart?.dispose()
  colorBarChart = null
  datasetBarChart = null
  doubleXBarChart = null
  threeDBarChart = null
  crosswiseBarChart = null
  MixedBarChart = null
  handleResize = null
})
</script>

<style lang="less">
@import '../index.less';
</style>
